<template>
  <el-row>
    <el-col :span="24" class="bg1">
      <div class="grid-content bg-purple">
        <FormPanel ref="formPanel" :list="formList" :cols="3" :labelWidth="110" :isSubmitBtn="false" @formChange="changeHandle" />
      </div>
      <div class="btn">
        <el-button size="small" icon="el-icon-search" type="primary" @click="query">查询</el-button>
        <el-button size="small" icon="el-icon-refresh-left" type="primary" @click="reset">重置</el-button>
      </div>
    </el-col>
    <el-col :span="24" class="bg2">
      <FilterTable
        ref="table"
        :dataSource="list"
        selectionType="single"
        :columns="columns"
        columnsRef="yxqAddwxxmxzTable"
        :datakey="'rows'"
        :fetchapi="fetchApi"
        :isColumnFilter="false"
        :isToperInfo="false"
        :params="fetchParams"
        :onColumnsChange="columns => (this.columns = columns)"
        :onRowSelectChange="selectChangeHandle"
      >
      </FilterTable>
      <!-- :fetchapi="fetchApi"
        :params="fetchParams" -->
    </el-col>
    <el-col :span="24">
      <span>维修备件</span>
      <FilterTable
        ref="twoTable"
        selectionType="single"
        :columns="columns2"
        :isColumnFilter="false"
        :isToperInfo="false"
        :isSelectColumn="false"
        columnsRef="yxqWxpjTable"
        :onColumnsChange="columns => (this.columns2 = columns)"
        :dataSource="list2"
        :height="150"
      >
      </FilterTable>
    </el-col>
    <el-col :span="24" style="margin-top:10px;">
      <div class="btn">
        <!-- <el-button size="small" icon="el-icon-folder-add" @click="addNewwx" type="primary" class="btnStyle">新增</el-button> -->
        <el-button size="small" icon="el-icon-folder-add" type="primary" class="btnStyle" @click="determine">确定</el-button>
        <el-button size="small" icon="el-icon-refresh-left" type="primary" class="btnStyle" @click="closeDialog">取消</el-button>
      </div>
    </el-col>
    <BaseDialog :visible.sync="visiblenewWxxm" title="维修项目编辑" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '10px' }" destroyOnClose>
      <newAddwxxm ref="newAddwxxm" @closeNewwx="closenewaddwxxm" />
    </BaseDialog>
    <BaseDialog :visible.sync="visibleTimeonce" title="维修项目选择" width="40%" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '10px' }" destroyOnClose>
      <div class="btn" style="margin-bottom:20px;">
        <el-tree :data="ceshi" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="btn">
        <el-button size="small" icon="el-icon-folder-add" type="primary" :disabled="btnHandle" class="btnStyle" @click="HandleTimeonce">选择</el-button>
        <el-button size="small" icon="el-icon-refresh-left" type="primary" class="btnStyle" @click="colseTimeonce">取消</el-button>
      </div>
    </BaseDialog>
  </el-row>
</template>
<script>
import newAddwxxm from './newAddwxxm/newAddwxxm';
import { dictionary } from '@/utils/dictMixin';
import { getnewAddwxxm, getModelLabourCode, getPrimaryGroupName, getSubGroupName, repairGroupCode, getLAbourCode, findLabourPart } from '@/api/repair/repair/activitesManage';
export default {
  name: 'addwxxm',
  components: {
    newAddwxxm
  },
  mixins: [dictionary],
  data() {
    return {
      list: [],
      list2: [],
      text: '',
      btnHandle: true,
      columns2: this.createTableColumns2(),
      columns: this.createTableColumns(),
      formList: this.createFormList(),
      fetchParams: { xhrAbort: true },
      ceshi: [],
      visibleTimeonce: false,
      visiblenewWxxm: false,
      fetchApi: getnewAddwxxm,
      onChangeColumn: [],
      dataTree: this.handleDataTree(),
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  mounted() {
    this.getModelLabourCode();
    // this.getPrimaryGroupName();
    this.getLAbourCode();
    //  this.query()  //原先初始化查询页面
    //  this.$refs.table.$refs.pageTable.list.forEach(x=>{
    //    if (x.REPAIR_TYPE_CODE!=null&&x.REPAIR_TYPE_CODE!=undefined){
    //      x.REPAIR_TYPE_CODE =  parseInt(x.REPAIR_TYPE_CODE)
    //    }
    //  })
  },
  methods: {
    handleDataTree() {
      return [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1'
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1'
            },
            {
              label: '二级 2-2'
            }
          ]
        }
      ];
    },
    validateFn(rule, value, callback) {
      if (value.length < rule.limit) {
        return callback(new Error(rule.message));
      }
      callback();
    },
    // 项目维修代码下拉框获取方法
    async getLAbourCode() {
      const res = await getLAbourCode();
      this.columns.find(x => x.dataIndex === 'REPAIR_TYPE_CODE').editItems = res.data.map(x => ({ value: x.REPAIR_TYPE_CODE, text: x.REPAIR_TYPE_NAME }));
    },
    // 选择维修项目方法
    HandleTimeonce() {
      this.visibleTimeonce = false;
      this.formList.find(x => x.fieldName === 'repairGroupCode').initialValue = this.text;
    },
    // 关闭维修项目选择弹框
    colseTimeonce() {
      this.visibleTimeonce = false;
    },
    // 树状图点击方法
    handleNodeClick(data) {
      console.log(data);
      if (data.children === undefined) {
        this.btnHandle = false;
        this.text = data.label;
      } else {
        this.btnHandle = true;
      }
    },
    // 打开维修项目选择弹框
    ClickTimeonce() {
      this.visibleTimeonce = true;
      this.repairGroupCode();
    },
    // 关闭子页面
    closenewaddwxxm() {
      this.visiblenewWxxm = false;
    },
    // 打开子页面
    addNewwx() {
      this.visiblenewWxxm = true;
    },
    // 确定方法
    determine() {
      if (this.onChangeColumn.length != 1) {
        this.$notify.error({
          title: '错误',
          message: '请选择一条内容'
        });
      } else {
        this.$emit('closeWx', this.onChangeColumn);
      }
    },
    selectChangeHandle(row) {
      this.onChangeColumn = row;
      this.getLabourPartList(row);
    },
    async getLabourPartList(row) {
      let param = {
        labourId: row[0].ITEM_ID,
        modelLabourCodes: row[0].MODEL_LABOUR_CODE,
        labourCodes: row[0].LABOUR_CODE,
        downTag: row[0].DOWN_TAG
      };
      console.log(row, param, '双击添加了');
      const res = await findLabourPart(param);
      console.log(res);
      this.list2 = res.data;
    },
    // 关闭本页面
    closeDialog() {
      this.$emit('closeWx', false);
    },
    async getModelLabourCode() {
      const res = await getModelLabourCode();
      console.log(res);
      this.formList.find(x => x.fieldName === 'modelLabourCode').itemList = res.data.map(x => ({ value: x.SERIES_ID + '', text: x.MODEL_LABOUR_NAME }));
      this.columns2.find(x => x.dataIndex === 'modelLabourCode').editItems = res.data.map(x => ({ value: x.SERIES_ID + '', text: x.MODEL_LABOUR_NAME }));
      this.columns.find(x => x.dataIndex === 'MODEL_LABOUR_CODE').editItems = res.data.map(x => ({ value: x.SERIES_ID + '', text: x.MODEL_LABOUR_NAME }));

    },
    // 获取主分类分类下拉框
    async getPrimaryGroupName() {
      const res = await getPrimaryGroupName();
      // this.formList.find(x => x.fieldName === 'primaryGroupName').itemList = res.data.map(x => ({ value: x.MAIN_GROUP_CODE, text: x.MAIN_GROUP_NAME }));
    },
    // 获取二级分类下拉框
    async getSubGroupName(val) {
      const res = await getSubGroupName(val);
      this.formList.find(x => x.fieldName === 'subGroupName').itemList = res.data.map(x => ({ value: x.SUB_GROUP_CODE, text: x.SUB_GROUP_NAME }));
    },
    query() {
      this.$refs.formPanel.SUBMIT_FORM();
    },
    reset() {
      this.$refs.formPanel.RESET_FORM();
      this.changeHandle();
    },
    async repairGroupCode() {
      this.ceshi = [];
      //  let cunChildren = []
      const res = await repairGroupCode();
      res.data.forEach((x, index) => {
        if (x.parent === '#') {
          let a = {};
          this.ceshi.push(a);
          this.ceshi[index].label = x.text;
          this.ceshi[index].id = x.id;
        }
      });
      this.ceshi.forEach((item1, index1) => {
        item1.children = [];
        res.data.forEach((item2, index2) => {
          if (item1.id === item2.parent) {
            let a = {};
            item1.children.push(a);
            this.ceshi[index1].children[this.ceshi[index1].children.length - 1].label = item2.text;
          }
        });
      });
      console.log(this.ceshi, 'this.ceshi');
      // console.log(cunParent,'cunParent')
    },
    // 获取表单的方法
    async getnewAddwxxm(val) {
      this.list = [];
      const res = await getnewAddwxxm(val);
      // res.data.rows.forEach(x =>{
      //   if (x.REPAIR_TYPE_CODE != null){
      //   x.REPAIR_TYPE_CODE = parseInt(x.REPAIR_TYPE_CODE)
      //   }
      // })
      this.$refs.table.$refs.pageTable.EXECUTE_INSERT(res.data.rows);
      // console.log(res,'res')
    },
    changeHandle(val) {
      val.flag = 'A';
      this.fetchParams = Object.assign({}, val);
    },
    changePrimaryGrou(val) {
      this.getSubGroupName(val);
    },
    createFormList() {
      return [
        {
          type: 'SELECT',
          label: '项目车系',
          fieldName: 'modelLabourCode',
          itemList: [],
          rules: [{ required: true, message: '请选择项目车系', trigger: 'blur'}],
          placeholder: '请选择...'
        },
        {
          type: 'INPUT',
          label: '维修项目名称',
          fieldName: 'labourName',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '维修项目代码',
          fieldName: 'labourCode',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '维修项目拼音',
          fieldName: 'spellCode',
          placeholder: ''
        },
        {
          type: 'SELECT',
          label: '数据来源',
          fieldName: 'downTag',
          itemList: this.createDictList('1045'),
          placeholder: '请选择...'
        },
        // {
        //   type: 'INPUT',
        //   label: '维修项目选择',
        //   fieldName: 'repairGroupCode',
        //   placeholder: '',
        //   unitRender: () => {
        //     return <el-button icon="el-icon-s-data" onClick={this.ClickTimeonce}></el-button>;
        //   }
        // },
        {
          type: 'INPUT',
          label: '备件代码',
          fieldName: 'partNo',
          placeholder: ''
        },
        {
          type: 'RANGE_DATE',
          label: '更新日期区间',
          fieldName: 'beginDate|endDate',
          dateType: 'exactdaterange',
          selfCols: 2,
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '备件名称',
          fieldName: 'partName',
          placeholder: ''
        },
        // {
        //   type: 'INPUT',
        //   label: '故障部位',
        //   fieldName: 'posName',
        //   placeholder: ''
        // },
        // {
        //   type: 'INPUT',
        //   label: '故障名称',
        //   fieldName: 'appName',
        //   placeholder: ''
        // },
        // {
        //   type: 'SELECT',
        //   label: '工种',
        //   fieldName: 'workerTypeCode',
        //   itemList: this.createDictList('8041')
        // },
        // {
        //   type: 'INPUT',
        //   label: '年款',
        //   fieldName: 'modelYear',
        //   placeholder: ''
        // },
        {
          type: 'SELECT',
          label: '收费工时为空',
          fieldName: 'nullLabour',
          itemList: this.createDictList('1004'),
          placeholder: '请选择...'
        }
        // {
        //   type: 'SELECT',
        //   label: '主分类名称',
        //   fieldName: 'primaryGroupName',
        //   itemList: [],
        //   placeholder: '请选择...',
        //   change: val => {
        //     this.changePrimaryGrou(val);
        //   }
        // },
        // {
        //   type: 'SELECT',
        //   label: '二级分类名称',
        //   fieldName: 'subGroupName',
        //   itemList: [],
        //   placeholder: '请选择...'
        // }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '项目关联车系名称',
          dataIndex: 'MODEL_LABOUR_CODE',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '维修项目代码',
          dataIndex: 'LABOUR_CODEF',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '维修项目名称',
          dataIndex: 'LABOUR_NAME',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '项目维修类型',
          dataIndex: 'REPAIR_TYPE_CODE', // 最好改成number类型
          sorter: true,
          showOverflowTooltip: true,
          editable: true,
          editType: 'select',
          editItems: []
          //   render: props => {
          //   return <span>{this.createDictText(props.row.REPAIR_TYPE_CODE, '8000')}</span>;
          // }
        },
        {
          title: '收费工时',
          dataIndex: 'STD_LABOUR_HOUR',
          precision: 2,
          sorter: true
        },
        {
          title: '派工工时',
          dataIndex: 'ASSIGN_LABOUR_HOUR',
          precision: 2,
          sorter: true
        },
        // {
        //   title: '工种',
        //   dataIndex: 'WORKER_TYPE_CODE',
        //   sorter: true,
        //   render: props => {
        //     return <span>{this.createDictText(props.row.WORKER_TYPE_CODE, '8041')}</span>;
        //   }
        // },
        {
          title: '索赔项目代码',
          dataIndex: 'OPERATION_CODE',
          sorter: true
        },
        {
          title: '索赔工时',
          dataIndex: 'CLAIM_LABOUR',
          sorter: true,
          editable: true,
          editType: 'input'
        },
        // {
        //     title: '发布时间',
        //     dataIndex: 'RELEASE_DATE',
        //     sorter: true,
        //     dateFormat: 'yyyy-MM-dd'
        // },
        {
          title: '拼音代码',
          dataIndex: 'SPELL_CODE',
          sorter: true
        },
        {
          title: '维修项目分组代码',
          dataIndex: 'REPAIR_GROUP_CODE',
          sorter: true
        },
        {
          title: '总部标准工时',
          dataIndex: 'OEM_LABOUR_HOUR',
          precision: 2,
          sorter: true
        },
        {
          title: '数据来源',
          dataIndex: 'DATA_SOURCES',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.DATA_SOURCES, '1045')}</span>;
          }
        },
        {
          title: '创建日期',
          dataIndex: 'CREATED_AT',
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '更新日期',
          dataIndex: 'UPDATED_AT',
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '是否会员专用',
          dataIndex: 'IS_MEMBER',
          sorter: true
        },
        {
          title: '更新状态',
          dataIndex: 'REPLACE_STATUS',
          sorter: true
        }
      ];
    },
    createTableColumns2() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '备件代码',
          dataIndex: 'partNo',
          sorter: true
        },
        {
          title: '备件名称',
          dataIndex: 'partName',
          sorter: true
        },
        {
          title: '仓库代码',
          dataIndex: 'storageCode',
          sorter: true
        },
        {
          title: '车系',
          dataIndex: 'partModelGroupCodeSet',
          sorter: true
        },
        {
          title: '数量',
          dataIndex: 'partQuantity',
          sorter: true
        },
        {
          title: '库存数量',
          dataIndex: 'stockQuantity',
          sorter: true
        },
        {
          title: '销售价',
          dataIndex: 'salesPrice',
          sorter: true
        },
        {
          title: '维修车型分组代码',
          dataIndex: 'modelLabourCode',
          sorter: true,
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '维修项目代码',
          dataIndex: 'labourCode',
          sorter: true
        },
        {
          title: '备件中缀',
          dataIndex: 'partInfix',
          sorter: true
        },
        {
          title: '故障部位',
          dataIndex: 'posName',
          sorter: true
        }
      ];
    }
  }
};
</script>

<style scoped lang="less">
.bg1 {
  border: 1px solid @borderColor;
  border-radius: @borderRadius;
  box-shadow: @boxShadow;
  padding: @modulePadding;
  padding-left: 0;
  padding-top: 15px;
  padding-bottom: 15px;
}
.bg2 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn {
  text-align: center;
}
.btnStyle {
  margin-top: 10px;
}
</style>
